<template>
  <div class="author-article-item">
    <div class="top">
      <a :href="`/#/article/${article.articleId}`" :title="`Article Title: ${article.name}`" class="regular-link">
        <h3 v-html="article.name" class="title"></h3>
      </a>
      <hot-level :hot-level="hotLevel"></hot-level>
    </div>
    <div class="authors">
      <author v-for="author in authors" :key="author.authorId" :author="author"></author>
      <div class="more" v-if="moreAuthors">
        <span>AuthorAmount: {{this.article.authors.length}}</span>
      </div>
    </div>
    <div class="publication" :title="`Publication: ${publication}`">
      <span>{{publication}}</span>
    </div>
    <div class="abstract">
      <p v-html="abstract"></p>
    </div>
  </div>
</template>

<script>
import Author from '@/components/Pieces/Author/AuthorItem';
import HotLevel from '@/components/Pieces/HotLevel/index';

export default {
  name: "AuthorArticleItem",
  props: {
    article: Object
  },
  data() {
    return {
      moreAuthors: false
    }
  },
  computed: {
    name() {
      return this.article.name ?? 'Loading';
    },
    authors() {
      if (this.article.authors.length > 4) {
        this.moreAuthors = true;
      }
      return this.article.authors.slice(0, 4) ?? [];
    },
    publication() {
      return this.article.publication.name ?? '';
    },
    hotLevel() {
      return this.article.hotLevel ?? 0;
    },
    abstract() {
      return this.article.abstract ?? 'Loading';
    }
  },
  components: {
    Author,
    HotLevel
  },
};
</script>

<style scoped lang="scss">
.author-article-item {
  >* {
    margin-bottom: 6px;
  }

  >.top {
    display: flex;
    justify-content: space-between;
    min-height: 50px;
    >a {
      color: #0077c2;
      >h3.title {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-family: 'Source Sans Pro', sans-serif;
      }
    }
    
  }
  
  >.authors {
    display: flex;
    flex-wrap: wrap;
    margin-right: 9px;
    >.more {
      display: flex;
      align-content: center;
      span {
        font-size: 0.8em;
        font-family: 'Merriweather Sans', sans-serif;
        background-color: rgba(155, 168, 182, 0.644);
        padding: 0 5px;
        border-radius: 5px;
      }
    }
  }

  >.publication {
    font-size: 0.8em;
    font-family: 'Nunito', sans-serif;
  }

  >.abstract {
    font-family: 'Lato', sans-serif;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    min-height: 76px;
  }
}
</style>
